{% extends 'base.html' %}
{% load mytags %}


{% block content %}
    {% include 'nav_cat_bar.html' %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary"><b>{{ publish_task.seq_no }}</b></span>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-group">
                                <li><a href="#"></a>
                                </li>
                                <li><a href="#"></a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div>
                            <div class="text-left">
                                <table class="table">
                                    <tr>
                                        <td class="text-navy">ID</td>
                                        <td>{{ publish_task.id }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">发布序列号</td>
                                        <td>{{ publish_task.seq_no }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">产品线</td>
                                        <td>{{ publish_task.product|get_product_name }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">产品名称</td>
                                        <td>
                                            {{ publish_task.project }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">环境类型</td>
                                        <td>
                                            {{ publish_task.env|get_env_name }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">版本</td>
                                        <td>
                                            {{ publish_task.version }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">更新理由</td>
                                        <td>
                                            <pre>{{ publish_task.update_remark }}</pre>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">代码地址</td>
                                        <td>{{ publish_task.project|get_code_dir }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">Tag</td>
                                        <td>{{ publish_task.code_tag }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">数据库更新说明</td>
                                        <td><pre>{{ publish_task.database_update }}</pre></td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">更新SQL文件</td>
                                        <td><a href="{{ publish_task.upload_sql|get_url }}">{{ publish_task.upload_sql|get_filename }}</a></td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">环境设置</td>
                                        <td><pre>{{ publish_task.settings }}</pre></td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">更新说明</td>
                                        <td><pre>{{ publish_task.update_note }}</pre></td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">测试评估建议</td>
                                        <td><pre>{{ publish_task.qa_note }}</pre></td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">项目负责人</td>
                                        <td>{{ publish_task.owner }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">提交时间</td>
                                        <td>{{ publish_task.submit_time|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">提交人</td>
                                        <td>{{ publish_task.submit_by|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">审核时间</td>
                                        <td>{{ publish_task.approval_time|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">审核人</td>
                                        <td>{{ publish_task.approval_by|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">计划发版时间</td>
                                        <td>{{ publish_task.publish_time|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">发布时间</td>
                                        <td>{{ publish_task.deploy_time|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">发布人</td>
                                        <td>{{ publish_task.deploy_by|none2null }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">状态</td>
                                        <td>{{ publish_task.status|get_status_name }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">创建时间</td>
                                        <td>{{ publish_task.create_time }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-navy">创建人</td>
                                        <td>{{ publish_task.create_by }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="ibox-title">
                    <span class="label label-primary"><b>发布信息</b></span>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-group">
                            <li><a href="#"></a>
                            </li>
                            <li><a href="#"></a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div>
                        <div class="text-left">
                            <form id="groupForm" enctype="multipart/form-data" method="post" class="form-horizontal" action="">
                            {% csrf_token %}
                            {% if error %}
                                <div class="alert alert-warning text-center">{{ error }}</div>
                            {% endif %}
                            {% if msg %}
                                <div class="alert alert-success text-center">{{ msg }}</div>
                            {% endif %}
{#                            <div class="form-group">#}
{#                                <label for="deploy_type" class="col-sm-4 control-label text-left">发版方式</label>#}
{#                                <div class="col-sm-8">#}
{#                                    <input id="task_id" name="task_id" type="text" class="form-control" value="{{ publish_task.id }}" style="display: none">#}
{#                                    <select class="form-control " id="deploy_type" name="deploy_type" onchange="deploy_type_change()">#}
{#                                        {% for p in type_list %}#}
{#                                            <option value="{{ p }}">{{ p }}</option>#}
{#                                        {% endfor %}#}
{#                                    </select>#}
{#                                </div>#}
{#                            </div>#}
                            <div class="hr-line-dashed"></div>
                            <label for="host_list" class="col-sm-4 control-label text-left">部署机器</label>
                            <div class="form-group">
                                <input id="task_id" name="task_id" type="text" class="form-control" value="{{ publish_task.id }}" style="display: none">
                                <div id="host_list_ip">
                                    {{ storage_host }}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-2">
                                        <p style="color: red">* 需要先手动完成发布任务，再确认发布</p>
                                </div>
                                <div class="col-sm-8 col-sm-offset-2">
                                    <button id="submit_button" class="btn btn-primary" type="submit">手动发布</button>

                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-2">
                                        <p style="color: red">* 确认发布后系统会自动构建发布任务完成发布，请谨慎操作！</p>
                                </div>
                                <div class="col-sm-8 col-sm-offset-2">
                                    <input id="auto_submit_button" class="btn btn-danger" type="button" onclick="auto_deploy()" value="自动发布">
                                    <div class="progress">
                                        <div class="outbar"></div>
                                        <br>
                                        <div class="output"></div>
                                     </div>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
        .progress{
            display: none;
            height: 100%;
            width: 100%;
            border:1px solid #eee;
        }
        .progress .outbar{
            transition:all 1s ease;
            -webkit-transition:all 1s ease;
            text-align: center;
            color: #fff;
            height: 30px;
            width: 30%;
            background-color: #5cb85c;
        }

</style>
<script>
    $(document).ready(function(){
        $('#show').click(function(){
            $('#last').css('display', 'none');
            $('#all').css('display', 'block');
        });
    });

    function deploy_type_change(){
        // 根据选择的发布类型 展示相关的服务器IP
        var deploy_type = $('#deploy_type').val();
        var task_id = $('#task_id').val();
        var url = '{% url 'get_deploy_host' %}?deploy_type=' + deploy_type + '&task_id=' + task_id;

        $.ajax({
            type: 'GET',
            url: url,
            data: { },
            success: function (data) {
                var html = "";
                $.each(data.host_list, function(k, v){
                    html += v + "<br>";
                });
                $("#host_list_ip").html(html);
            }
        });
    }
    var per = 0,finish = false;
    function loading() {

        //初始化
        per = 0;finish = false;
        $(".progress .outbar").css('width','0').html('0%');
        $(".progress .output").css('width','0').html('');
        $("#auto_submit_button").hide().siblings().show();
        //set interval
        var load = setInterval(function () {
            if(finish){
{#                $(".progress").hide().siblings().show();#}
                clearInterval(load);
            }
            // 请求接口
            var task_id = $('#task_id').val();
            var url = '{% url 'get_deploy_progress' %}?task_id=' + task_id;
            $.ajax({
                type: 'GET',
                url: url,
                data: { },
                success: function (data) {
                    console.log(data);
                    pre = data.progress;
                    info = data.info;
                    console.log(info);
                    $(".progress .outbar").css('width',pre+'%').html(pre+'%');
                    $(".progress .output").css('width','100%').html('<pre>' + info + '</pre>');
                    if (pre > 99){
                        finish = true
                    }
                },
                error: function(e) {
                    finish = true
                }
            });
        },1000)
    }
    function auto_deploy(){
        // 启动定时器轮询发布进度
        var task_id = $('#task_id').val();
        var url1 = '{% url 'publish_task_deploy_judge' %}?task_id=' + task_id;
        $.ajax({
            type: 'GET',
            url: url1,
            data: { },
            success: function (data1){
                if(data1 == 'true'){
                    loading();
                    var task_id = $('#task_id').val();
                    var deploy_type = $('#deploy_type').val();
                    var url = '{% url 'publish_task_deploy_auto' %}?task_id=' + task_id + '&deploy_type=' + deploy_type;
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: { },
                        success: function (data) {
                            if(data == 'error'){
                                alert('发布报错！');
                            }
                            else if(data == 'sim'){
                                alert('只支持模拟环境！');
                            }
                            else {
                            }
                        }
                    });
                }
                else if(data1 == 'false'){
                    alert('发布中，请勿重复操作！')
                }
                else{
                    alert('发布报错！')
                }
            }
        });
    }

</script>


{% endblock %}